export const loadSvgfile = async (element: HTMLElement | null | undefined) => {
    if (!element) {
        return;
    }
    const svgElements = element.querySelectorAll('svg');
    let promises: Promise<void>[] = [];
    for (let i = 0; i < svgElements.length; i++) {
        const svgElement = svgElements[i];
        const svgHeight = svgElement.clientHeight;
        const svgWidth = svgElement.clientWidth;
        const svgOuterHTML = svgElement.outerHTML;
        const useElement = svgElement.querySelector('use');
        let svgFill: string | null = null;
        if (useElement) {
            // 获取fill属性的值
            svgFill = useElement.getAttribute('fill');
        }
        const svgPath = extractPaths(svgOuterHTML);
        if (svgPath) {
            const promise = fetch(svgPath)
                .then((response) => response.text())
                .then((svgContent) => {
                    // 正则表达式匹配width属性和其值
                    const regexWidth = /width=("|\')(.*?)("|\')/gi;
                    // 正则表达式匹配height属性和其值
                    const regexHeight = /height=("|\')(.*?)("|\')/gi;
                    // 替换width属性的值
                    const newSvgContentWidth = svgContent.replace(regexWidth, `width="${svgWidth.toString()}"`);
                    // 替换height属性的值
                    const newSvgContentHeight = newSvgContentWidth.replace(regexHeight, `width="${svgHeight.toString()}"`);
                    //在svg标签后面插入fill 属性
                    const newSvgContentFill = svgFill ? newSvgContentHeight.replace('<svg', `<svg fill="${svgFill}"`) : newSvgContentHeight;
                    svgElement.outerHTML = newSvgContentFill;
                })
                .catch((error) => {
                    console.error('Error loading SVG:', error);
                });                
            promises.push(promise);
        }
    }
    await Promise.all(promises);
    return element;
}

function extractPaths(xlinkHref: string) {
    // 正则表达式匹配 #icon- 开头，并且捕获后续所有由 - 分隔的字符串
    const regex = /#icon-([a-zA-Z0-9-]+)/g;
    let svgPath = null;
    let match;

    // 循环匹配所有结果
    while ((match = regex.exec(xlinkHref)) !== null) {
        // 提取所有捕获的路径
        // 提取匹配的路径
        const path = match[1];
        // 将路径按 - 分隔成多个部分
        const parts = path.split('-');
        if (parts.length > 0) {
            svgPath = '/src/assets/icons';
        }

        for (let i = 0; i < parts.length; i++) {
            if (parts[i]) {
                svgPath = svgPath + '/' + parts[i];
            }
        }
        svgPath = svgPath + '.svg';
    }

    // 返回捕获的路径数组
    return svgPath;
}
